// 我自己封装一些全局指令
// 情况1: 对象+install方法
const directiveObj = {
  install (Vue) {
    Vue.directive('fofo', {
      inserted (el) {
        if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
          // 如果直接是input标签/textarea标签
          el.focus()
        } else {
          // 指令在van-search组件身上, 获取的是组件根标签div, 而input在标签内
          const inp = el.querySelector('input')
          const textArea = el.querySelector('textarea')
          // 如果找到了
          if (inp || textArea) {
            inp && inp.focus()
            textArea && textArea.focus()
          } else {
            // 本身也不是, 子标签里也没有
            console.error('请把v-fofo用在输入框标签上')
          }
        }
      },
      updated (el) {
        if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
          // 如果直接是input标签/textarea标签
          el.focus()
        } else {
          // 指令在van-search组件身上, 获取的是组件根标签div, 而input在标签内
          const inp = el.querySelector('input')
          const textArea = el.querySelector('textarea')
          // 如果找到了
          if (inp || textArea) {
            inp && inp.focus()
            textArea && textArea.focus()
          } else {
            // 本身也不是, 子标签里也没有
            console.error('请把v-fofo用在输入框标签上')
          }
        }
      }
    })
  }
}
export default directiveObj
// 情况2: 导出的函数(不是对象+install方法)
// export default function (Vue) {
//   Vue.directive('fofo', {
//     // 指令所在标签, 插入到真实DOM时, 才触发
//     inserted (el) {
//       // van-search组件封装一套div里包含input
//       // el是原生的div标签
//       // 往里获取到input
//       // JS触发标签事件, 直接.事件名()
//       el.querySelector('input').focus()
//     }
//   })
// }
